<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" color="white"  title="在装项目" @click-left="back" backgroundColor="#393c43"  />
		<view class="top-bar flex">
			<view class="search flex">
				<input type="text" value="" placeholder="请输入标题关键词" />
				<text class="fa fa-search"></text>
			</view>
			<label class="selall flex">
				<radio :checked="isAll" @click="selectAll" />
				<text>全选</text>
			</label>
			<text class="delall" @click="deleteAll">删除</text>
		</view>

		<view class="item flex" v-for="(project, index) in projectArray" v-bind:key="index">
			<view class="top flex">
				<view class="left">
					<navigator :url="'/pages/krpano/preview?project_id='+project.id"><image :src="project.imgUrl" mode=""></image></navigator>
					<radio value="" :checked="selected[index]" @click="selectThis(index)" />
				</view>
				<view class="info flex">
					<view class="flex flex-a-c title">
						<text class="t1">{{project.name}}</text>
						<text class="t2">面议</text>
					</view>
					<view class="info-i">
						<text class="iconfont icon-dingwei"></text>
						<text>{{project.address}}</text>
					</view>
					<view class="info-i">
						<text class="iconfont icon-fangjian"></text>
						<text>{{project.room}}</text>
					</view>
					<view class="info-i">
						<text class="iconfont icon-zhuangxiu"></text>
						<text>{{project.style}}</text>
					</view>
				</view>
			</view>
			<view class="tools flex flex-a-c">
				<view class="tools-i">
					<text class="iconfont icon-xinxi"></text>
					<text>信息</text>
				</view>
				<view class="tools-i" @click="edit(project.id)">
					<text class="iconfont icon-image"></text>
					<text>编辑</text>
				</view>
				<view class="tools-i">
					<text class="iconfont icon-yidong"></text>
					<text>移动</text>
				</view>
				<view class="tools-i">
					<text class="iconfont icon-lajitong"></text>
					<text @click="deleteThis(index)">删除</text>
				</view>
			</view>
		</view>

		<text class="flex no-more">没有更多了</text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isAll: false,
			projectArray: [],
			selected:[false,false,false],
			indexArray:[]
		};
	},
	onLoad: function() {
		var cellphone;
		uni.getStorage({
		    key: 'cellphone',
		    success: function (res) {
		        cellphone = res.data
		    },
			fail:function(res){
				uni.navigateTo({
					url:"../login/index"
				})
			}
		});
		uni.request({
			url:this.websiteUrl+'/api/project_list',
			data:{
				cellphone:cellphone
			},
			success:(resp)=> {
				console.log(resp.data.data)
				this.projectArray = resp.data.data;
			}
		})
	},
	methods: {
		selectAll: function() {
			this.isAll == false ? (this.isAll = true) : (this.isAll = false);
			if(this.isAll){
				for(var i = 0; i < this.selected.length;i++){
					this.$set(this.selected,i,true);
				}
			}else{
				for(var i = 0; i < this.selected.length;i++){
					this.$set(this.selected,i,false);
				}
			}
			
		},
		back() {
			uni.switchTab({
				url: '../user/index'
			});
		},
		deleteThis: function(index) {
			var temArray = [];
			for (var i = 0; i < this.projectArray.length; i++) {
				if (i != index) {
					temArray.push(this.projectArray[i]);
				}else{
					uni.request({
						url:this.websiteUrl+"/api/delete_project",
						method:"POST",
						header:{
							"content-type":"application/x-www-form-urlencoded"
						},
						data:{
							projectId:this.projectArray[i].id
						},
						success(resp) {
							console.log(resp)
						}
					})
				}
			}
			this.projectArray = temArray;
		},
		deleteAll: function() {
			if (this.isAll == true) {
				this.projectArray = [];
			}
		},
		selectThis: function(index) {
			if(this.selected[index] == true){
				this.$set(this.selected,index,false)
			}
			else{
				this.$set(this.selected,index,true)
				this.indexArray.push(index);
			}
			console.log(this.selected)
		},
		edit:function(id){
			uni.navigateTo({
				url:"/pages/krpano/krpano?project_id="+id
			})
		}
	}
};
</script>

<style>
@import url('../../common/common.css');
.top-bar {
	flex-direction: row;
	padding: 0 20rpx;
	height: 110rpx;
	align-items: center;
	background: #393c43;
	margin-bottom: 20rpx;
}
.search {
	width: 440rpx;
	background: hsla(0, 0%, 93%, 0.8);
	height: 50rpx;
	border-radius: 25rpx;
	align-items: center;
	padding: 0 20rpx;
}
.search input {
	font-size: 28rpx;
	flex-grow: 1;
	color: #fff;
	margin-right: 10rpx;
}
.fa-search {
	color: #fff;
	font-size: 34rpx;
}
.selall {
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.selall radio {
	transform: scale(0.8);
	margin-right: 16rpx;
}
.delall {
	width: 100rpx;
	height: 40rpx;
	line-height: 40rpx;
	background: #d71619;
	color: #fff;
	border-radius: 20rpx;
	text-align: center;
	font-size: 24rpx;
}

.item {
	padding: 20rpx;
	background: #393c43;
	flex-direction: column;
	margin-bottom: 1rpx;
}
.item .top {
	position: relative;
	margin-bottom: 20rpx;
}
.item image {
	width: 225rpx;
	height: 225rpx;
}
.item radio {
	position: absolute;
	top: 4rpx;
	left: 4rpx;
	transform: scale(0.8);
}
.info {
	flex-grow: 1;
	flex-direction: column;
	margin-left: 20rpx;
	justify-content: space-between;
}
.title {
	justify-content: space-between;
}
.title .t1 {
	font-size: 32rpx;
	color: #fff;
}
.title .t2 {
	font-size: 36rpx;
	color: #d71619;
}
.info-i {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.info-i text {
	font-size: 28rpx;
	color: #ddd;
}
.info-i .iconfont {
	margin-right: 16rpx;
	font-size: 28rpx;
}
.tools {
	height: 60rpx;
}
.tools-i {
	display: flex;
	flex-direction: row;
	border: 1rpx solid #d71619;
	color: #d71619;
	align-items: center;
	font-size: 24rpx;
	margin-right: 15rpx;
	height: 40rpx;
	border-radius: 20rpx;
	padding: 0 10rpx;
	background: #fff;
}
.tools-i .iconfont {
	font-size: 18rpx;
}

.no-more {
	background: #d71619;
	color: #fff;
	font-size: 24rpx;
	margin: 20rpx 80rpx;
	line-height: 50rpx;
	align-items: center;
	justify-content: center;
	border-radius: 25rpx;
}
</style>
